
<div id="xxx" class="fluent-profile-menu" blazor:onclick="1" b-rsm9d6pikk="">
  <div id="xxx" class="fluent-persona" style="height: inherit;" position="end" b-n7zog0zvqi="">
    <div class="initials" b-n7zog0zvqi="">
      <div class="fluent-presence-badge" title="I'm available" b-1o8tp31nhy="">
        <div style="display: table-cell; vertical-align: middle; width: 20px; min-width: 20px; height: 20px; min-height: 20px;" b-n7zog0zvqi="">
          <img src="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" alt="Bill Gates" title="Bill Gates" style="max-width: 20px; max-height: 20px;" b-n7zog0zvqi="">
        </div>
        <svg class="status" style="width: 12px; fill: var(--presence-available);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="2" blazor:onclick="3">
          <title>I'm available</title>
          <path d="M12 24a12 12 0 1 0 0-24 12 12 0 0 0 0 24Zm5.06-13.44-5.5 5.5a1.5 1.5 0 0 1-2.12 0l-2-2a1.5 1.5 0 0 1 2.12-2.12l.94.94 4.44-4.44a1.5 1.5 0 0 1 2.12 2.12Z"></path>
        </svg>
      </div>
    </div>
    <div class="name" b-n7zog0zvqi="">Bill Gates</div>
  </div>
</div>
<div class="fluent-overlay" style="cursor: auto; position: fixed; z-index: 9900;" blazor:onclick="4" blazor:oncontextmenu="5" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
  <div style="display: flex; align-items:center; justify-content: center; width: 100%; height: 100%" b-xkrr7evqik=""></div>
</div>
<fluent-anchored-region id="xxx" anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="start" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="bottom" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" b-2ov9fhztky="" blazor:elementreference="xxx">
  <div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout);" b-2ov9fhztky="">
    <div class="stack-vertical" style="align-items: start; justify-content: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
      <div class="fluent-popover-content" b-qp3z8ghd2d="">
        <div part="header" b-qp3z8ghd2d="">
          <div class="stack-horizontal" style="justify-content: start; align-items: center; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
            <p part="header-label" typo="body" class="fluent-typography" b-1nnnfjehkp="">Microsoft</p>
            <div style="flex-grow: 1;"></div>
            <fluent-button type="button" appearance="stealth" blazor:onclick="6" part="header-button" b-x1200685t0="" blazor:elementreference="xxx">Sign out</fluent-button>
          </div>
        </div>
        <div part="body" b-qp3z8ghd2d="">
          <div class="stack-horizontal" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%; height: 100%;" b-0nr62qx0mz="">
            <div class="fluent-persona" style="align-items: normal;" position="end" b-n7zog0zvqi="">
              <div class="initials" b-n7zog0zvqi="">
                <div class="fluent-presence-badge" title="" b-1o8tp31nhy="">
                  <div style="display: table-cell; vertical-align: middle; width: 48px; min-width: 48px; height: 48px; min-height: 48px;" b-n7zog0zvqi="">
                    <img src="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" alt="" title="" style="max-width: 48px; max-height: 48px;" b-n7zog0zvqi="">
                  </div>
                </div>
              </div>
              <div class="name" b-n7zog0zvqi="">
                <h5 part="fullname" typo="header" class="fluent-typography" style="font-weight: bold;" b-1nnnfjehkp="">Bill Gates</h5>
                <p part="email" typo="body" class="fluent-typography" b-1nnnfjehkp="">bill.gates@microsoft.com</p>
              </div>
            </div>
          </div>
        </div>
        <div part="footer" b-qp3z8ghd2d="">
          <div class="stack-horizontal" style="justify-content: start; align-items: center; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
            <p part="footer-label" typo="body" class="fluent-typography" b-1nnnfjehkp="">v 3.14</p>
            <div style="flex-grow: 1;"></div>
            <fluent-anchor href="#" appearance="hypertext" blazor:onclick="7" blazor:onclick:preventdefault="" part="footer-link" blazor:elementreference="xxx">View account</fluent-anchor>
          </div>
        </div>
      </div>
    </div>
  </div>
</fluent-anchored-region>
